<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放视频</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/playVideo/DPlayer.min.css}">
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.6.2}" rel="stylesheet"/>
    <style type="text/css">
        .dplayer-logo {
            max-width: 90px !important;
            max-height: 90px !important;
        }

        .bt {
            text-align: center;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .optionK {
            width: 50%;
        }

        #content-main {
            height: calc(100% - 90px);
        }

        .lyb {
            margin: 10px 0px 10px 0px;
            border: 1px solid #ccc !important;
            padding: 14px;
            border-radius: 16px !important;
        }

        .tx {
            max-width: 30px;
            border-radius: 50%;
        }

        .textjz {
            text-align: center;
        }

        .lybmsg {
            margin-top: 10px;
        }

        #wangEditor {
            margin-bottom: 30px;
        }

        .myimgshow3 {
            width: 100%;
            height: 70px;
        }

    </style>
</head>
<body class="gray-bg">
<!--<br>-->
<h3 style="margin: 20px 10px 10px 20px;" th:text="${uploadInfo.titleName}"></h3>
<div class="col-sm-8">
    <div id="dplayer"></div>
    <h3 class="col-sm-4">评论区留言: </h3>
    <div id="PLCR"></div>
    <div class="col-sm-12 lyb" th:each="comment : ${commentList}">
        <div class="col-sm-1 textjz">
            <img class="tx" th:src="${comment.avatar}"/>
            <h5 th:text="${comment.userName}"></h5>
        </div>
        <div class="col-sm-11 lybmsg" th:utext="${comment.commentMsg}"></div>
    </div>
    <div class="col-sm-12" style="text-align: center;margin: 10px 0px 30px 0px;">
        <button id="fs" type="button" class="btn btn-primary">发送</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="qk" type="button" class="btn btn-danger">清空</button>
    </div>
    <div class="col-sm-12" id="wangEditor"></div>
</div>
<div class="col-sm-4">
    <h3>推荐区:</h3>
    <div class="col-sm-12">
        <div class="col-sm-6 optionK" th:value="${fileInfo.id}" th:titleName="${fileInfo.titleName}"
             th:each="fileInfo : ${fileInfoList}">
            <div class="ibox">
                <div class="ibox-content">
                    <img class="myimgshow3" th:src="${fileInfo.surfacePlotUrl}"/>
                </div>
                <h5 class="bt" th:text="${fileInfo.titleName}"></h5>
                <h5 class="bt">日期: <span th:text="${#dates.format(fileInfo.updateDate, 'yyyy-MM-dd')}"></span></h5>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script type="text/javascript" th:src="@{/playVideo/hls.min.js}"></script>
<script type="text/javascript" th:src="@{/playVideo/danmaku.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/playVideo/utils.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/playVideo/DPlayer.min.js}" charset="utf-8"></script>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var sysuser = [[${user}]];
    var uploadInfo = [[${uploadInfo}]];

    //富文本编辑器
    var E = window.wangEditor;
    var editor = new E("#wangEditor");
    editor.config.height = 150;
    // 配置菜单栏，删减菜单，调整顺序
    editor.config.menus = [
        'bold',
        'foreColor',
        'link',
        'emoticon',
        'image',
        'undo',
        'redo',
    ]
    editor.create();

    $('#qk').click(function () {
        editor.txt.clear(); // 清空
    });
    $('#fs').click(function () {
        var msgdata = editor.txt.html();
        if (msgdata != null && msgdata != '') {
            var HzComment = {};
            HzComment.uploadInfoId = uploadInfo.id;
            HzComment.commentMsg = msgdata;
            $.operate.post(ctx + 'comment/add', HzComment, function (res) {
                if (res.code == 0) {
                    editor.txt.clear(); // 清空
                    PLCR(msgdata);
                    $.modal.msg(res.msg);
                } else {
                    $.modal.msgError(res.msg);
                }
            });
        }
    });


    //插入一条评论
    function PLCR(msgdata) {
        $('#PLCR').after(
            '<div class="col-sm-12 lyb">' +
            '        <div class="col-sm-1 textjz">' +
            '            <img class="tx" src="' + sysuser.avatar + '"/>' +
            '            <h5>' + sysuser.userName + '</h5>' +
            '        </div>' +
            '        <div class="col-sm-11 lybmsg">' + msgdata + '</div>' +
            '</div>'
        );
    }

    //推荐相关跳转
    $('.optionK').click(function () {
        var valueid = $(this).attr('value');
        var url = ctx + "Video/detail/" + valueid;
        var titleName = $(this).attr('titleName');
        $.modal.openTab(titleName, url);
    });

    var dp = new DPlayer({
        container: document.getElementById('dplayer'),
        autoplay: false,
        preload: 'auto',
        loop: true,
        screenshot: true,
        logo: '/img/mylogo.png',
        volume: 0.8,   //默认音量
        video: {
            url: "[(${srsUrl})]",
            pic: '[(${fmUrl})]',    //视频封面
            // thumbnails: '[(${fmUrl})]',    //TODO 视频进度省略图
        },
        danmaku: {
            id: uploadInfo.id,
            user: sysuser.userName,
            api: '/danmaku/danmakuIng',     //获取弹幕
            addition: ['/danmaku/danmakuIng'],   //新增,
            maximum: 1000,
            unlimited: true,
            bottom: '15%'
        },
        contextmenu: [
            {
                text: '收藏本视频',
                link: '/sc',
            },
        ],
    });

    //动态更新图片高度
    function refresh_height() {
        var img_width = $('.myimgshow3').get(0).width;
        $('.myimgshow3').css('height', img_width * 0.62);
    }

    refresh_height();
</script>
</body>
</html>
